<template>
<!-- 账户余额 -->
  <view class="accountBalance-wrapper">
    <view class="chargingManager-end">
      <view class="chargingManager-text"> 
        <view>可用金额（元）</view>
        <view class="money">{{ accountBalance }}</view>
      </view>
      <img :src="cnd_path_image_prefix +'/accountTopHeader.png'" alt="" class="accountTopHeaderImg">
    </view>
    <view class="rechargeAmount">
      <view>余额充值</view>
      <view class="money-box">
        <view class="money-content" :class="{active : itemIndex == 0}" @click="tabClick(0)">100元</view>
        <view class="money-content" :class="{active : itemIndex == 1}" @click="tabClick(1)">200元</view>
        <view class="money-content" :class="{active : itemIndex == 2}" @click="tabClick(2)">500元</view>
      </view>

      <view class="textBox">
        <view class="warringText">本次充电需要您预先支付费用</view>
        <view class="infoText">预付资金安全便捷，充电结束后按实际产生费用扣除。 预付款未使用部分，将自动发起退款。</view>
        <!-- TODO: 小额充值 -->
        <input type="text" v-if="showInput" v-model="accountBalance">
        <view style="width: 50px; height: 50px;" @click="handleShowInput"></view>
      </view>

      <view class="paySure" @click="submit">确认支付</view>
    </view>
  </view>
</template>

<script>
import {chargeRechargeMoneyApi,chargeBalanceApi} from "../api/chargingManager/index"
import { basic } from '../common/basicConfig'
export default {
  data(){
    return {
      cnd_path_image_prefix: basic.cnd_path_image_prefix,
      // tab下标
      itemIndex: -1,
      // 充值金额
      chargAmount:0,
      balance:0,
      accountBalance: '',
      showInput: false,
      showInputNum : 1,
      connectorId: ''
    }
  },
  onLoad(options){
    this.connectorId = options.connectorId || ''
    console.log(this.connectorId);
  },
  onShow(){
    this.getBalance()
    this.showInputNum = 1
  },
  methods:{
    // TODO: 小额输入方法
    handleShowInput(){
      if (this.showInputNum >= 5){
        this.showInput = true
        return
      }
      this.showInputNum++

    },
    // tab切换
    tabClick(index){
      this.itemIndex = index
      if(this.itemIndex == 0){
        this.accountBalance = 100
      }
      else if(this.itemIndex == 1){
        this.accountBalance = 200
      }
      else if(this.itemIndex == 2){
        this.accountBalance = 500
      }
    },
    // 支付
    submit(){
      let params = {
        userId:uni.getStorageSync("userId"),
        amount:this.accountBalance,
        openid:uni.getStorageSync("openid"),
      }
      let _this = this
      chargeRechargeMoneyApi(params).then(res=>{
        wx.requestPayment({
          timeStamp: res.data.packageStr.timeStamp,
          nonceStr: res.data.packageStr.nonceStr,
          package: res.data.packageStr.packageValue,
          signType: res.data.packageStr.signType,
          paySign: res.data.packageStr.paySign,
          success (res) {
            wx.redirectTo({
              url:`/pages/charging/chargingManager/accountSuccess?connectorId=${_this.connectorId}`
            })
          },
          fail (res) {
            
          }
        }) 
      }) 
    },
    //获取账号余额
    getBalance() {
      chargeBalanceApi().then((res) =>{
        this.accountBalance = res.data.balance || 0
      })
    }
  }
}
</script>

<style scoped>
.accountBalance-wrapper{
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(85, 126, 255, 1), rgba(255, 255, 255));
  position: relative;
}
.chargingManager-end{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding:14px;
  color: #fff;
}
.chargingManager-text{
  font-size: 14px;
  margin-top: 21px;
}
.textBox{
  margin-top: 19px;
  font-size: 14px;
  line-height: 25px;
}
.warringText{
  color: #FC8800;
}
.accountTopHeaderImg{
  width: 230px;
  height: 164px;
}
.money{
  font-weight: 600;
  font-size: 40px;
  margin-top: 10px;
}
.rechargeAmount{
  width: 100%;
  height: calc(100% - 100px);
  background: #fff;
  box-sizing: border-box;
  border-radius: 24px 24px 0 0 ;
  padding: 30px 14px;
  position: absolute;
  top: 120px;
}
.money-box{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.money-content{
  width: 30%;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 4px 4px 4px 4px;
  font-size: 14px;
  color: #557EFF ;
  background: #E0EAFF;
}
.active{
  width: 30%;
  height: 48px;
  text-align: center;
  line-height: 48px;
  font-size: 14px;
  color: #fff ;
  background: #557EFF;
  border-radius: 4px 4px 4px 4px;
}
.tip{
  font-size: 12px;
  color: red;
  margin-top: 20px;
}
.inputBox{
  width: 100%;
  height: 48px;
  border-radius: 4px;
  background: #F6F6F6;
  margin-top: 20px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.inputBox input{
  width: calc(100% - 20px);
}
.symbol{
  margin-right: 10px;
  font-size: 18px;
  color: #557EFF;
}
.paySure{
  width: 92%;
  text-align: center;
  color: #fff;
  line-height: 48px;
  box-sizing: border-box;
  background: #4c75fe;
  border-radius: 40px;
  position: absolute;
  bottom: 41px; 
  /*margin-top: 200px;*/
}
</style>